<template>
  <div class="chat-time-line-wrap" @click="stopBubbles($event)"> 
    <div ref="wrapper"> 
      <ul class="cont" ref="cont">  
        <li class="cont-record" v-for="(index) in timeScale"  :key="index">
          <span class="cont-record-notes"></span>
        </li>
      </ul>
      <span class="time-scale"></span>
      <span class="select-time" id="timed"></span>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'fyChatTimeLine',
  props: {
    recommendList: {
      type: Array,
      required: true
    },
  },
  
  data () {
    return {
      timeScale: 0,
      setRight: this.$refs.cont,
      timeList: this.recommendList
    }
  },
  methods: {
    stopBubbles(ev) { //阻止输框冒泡
            ev.cancelBubble = true
        },
    verScroll () { 
      let date = this.timeList[0].addTime
      let time  = new Date(new Date(date).toLocaleDateString());
      let scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth

      let endDay = new Date(new Date(this.timeList[this.timeList.length-1].addTime).toLocaleDateString());
      let timeDifference = endDay.getTime()-time.getTime();
      let e_daysold = timeDifference / (24 * 60 * 60 * 1000);
      let daysold = Math.ceil(e_daysold)+1;                 //相差天数
      this.timeScale = daysold;
      let width = this.timeScale * (10/375)*scrollWidth + scrollWidth*(138/375)// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
      this.$refs.cont.style.width = width + 'px'  // 修改滚动区域的宽度
      
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            startX: 0,  
            click: true,
            scrollX: true,
            scrollY: false,
            probeType: 3,
            momentumLimitTime:500,
            stopPropagation:true,
            // momentumLimitDistance:15,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh() //如果dom结构发生改变调用该方法
        }

        this.scroll.on('scroll', () => {//滑动监听
          this.setRight = this.$refs.cont.getBoundingClientRect().right
          this.distance = (this.setRight-scrollWidth)/((10/375)*scrollWidth)
          let endDay = new Date(new Date(this.timeList[this.timeList.length-1].addTime).toLocaleDateString());
          let time = Math.round(this.distance)* (24 * 60 * 60 * 1000);
          let timeDifference = new Date(endDay.getTime()-time);
          let inTime;

          if(this.distance<=0){
            this.$refs.cont.style.right = '0px'
            document.querySelector('.select-time').innerHTML = endDay.getFullYear() + '-' + (endDay.getMonth() + 1) + '-' + endDay.getDate()
          }
          
          this.distance = (this.setRight-scrollWidth)/((10/375)*scrollWidth)
          this.$refs.cont.style.right = Math.floor(this.distance)*((10/375)*scrollWidth)+'px' //滚动距离
          inTime = timeDifference.getFullYear() + '-' + (timeDifference.getMonth() + 1) + '-' + timeDifference.getDate()
          document.querySelector('.select-time').innerHTML = inTime //时间框修改时间
        })
      })
      
    },

    timeLine(){//时间线布局
      let date = this.timeList[0].addTime
      let time  = new Date(new Date(date).toLocaleDateString());
      let endDay = new Date(new Date(this.timeList[this.timeList.length-1].addTime).toLocaleDateString());
      let timeStrip = document.querySelectorAll('.cont-record')
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      
      for(let i=0;i<timeStrip.length; i++){
        let timeStripHigh = time.getTime() + (i*24 * 60 * 60 * 1000)
        let timeD = new Date(timeStripHigh);

        let day = timeD.getDate();
        let month = timeD.getMonth()+1;
        if(day==1) {
          document.querySelectorAll('.cont-record')[i].style.height= '30px'
          document.querySelectorAll('.cont-record-notes')[i].innerHTML = month + ' 月'
        }else if(day==15) {
          document.querySelectorAll('.cont-record')[i].style.height= '30px'
          document.querySelectorAll('.cont-record-notes')[i].innerHTML = month + '-15'
        }

        this.setRight = this.$refs.cont.getBoundingClientRect().right
        
      }
      document.querySelector('.select-time').innerHTML = endDay.getFullYear() + '-' + (endDay.getMonth() + 1) + '-' + endDay.getDate()
      document.documentElement.scrollTop = scrollHeight
      document.body.scrollTop = scrollHeight

      
      
      for(var i=0;i<this.timeList.length; i++){
        let highDay = new Date(new Date(this.timeList[i].addTime).toLocaleDateString());
        let highDifference = highDay.getTime()-time.getTime();
        let highsold = highDifference / (24 * 60 * 60 * 1000);
        let highdayIndex = Math.floor(highsold);                 //相差天数
        let high = timeStrip[highdayIndex]
        high.classList.add('cont-record-high')
      }
      
    },

  },

  watch: {
    setRight() {
      let scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let timeStrip = document.querySelectorAll('.chat-content-warp')
      let distance = (this.setRight-scrollWidth)/((10/375)*scrollWidth)
      let endDay = new Date(new Date(this.timeList[this.timeList.length-1].addTime).toLocaleDateString());
      let time = Math.round(distance)* (24 * 60 * 60 * 1000);
      let timeDifference = new Date(endDay.getTime()-time);
      let arr = []
      let sameDay = []

      for(var i = 0; i<this.timeList.length;i++) {
        let listTime = new Date(this.timeList[i].addTime)

        timeStrip[i].offsetTop >= scrollTop + 100
        if(listTime.toLocaleDateString()==timeDifference.toLocaleDateString()){
          arr.push(i)
          for(var j = 0; j<this.timeList.length;j++){
            timeDifference.toLocaleDateString() == new Date(this.timeList[j].addTime).toLocaleDateString() ? sameDay.push(j) :''
          }
          
          this.index = sameDay[0]
          // console.log(timeDifference.toLocaleDateString(),sameDay)
          document.documentElement.scrollTop = timeStrip[this.index].offsetTop - 100
          document.body.scrollTop = timeStrip[this.index].offsetTop - 100
        }
      }
    }
  },
  
  updated(){
    this.timeLine()
  },
  mounted () {
    this.$nextTick(() => {
      this.verScroll()
    })
  },

}
</script>

<style lang="scss" scoped>
@import url('~@css/public/reset.scss');
@import '@css/globalCite/defaultVariable.scss';
@import '@css/globalCite/defaultThemeVariable.scss';
@import '@css/globalCite/themeMixin.scss';
@import '@css/globalCite/bgImageMixin.scss';
@import '~@css/components/chatTimeLine/fyChatTimeLine.scss';
</style>